<template xmlns:>
  <div class="index">
    <el-container>
      <el-header style="padding: 0">
        <div
            style="width:100%;height:30px;line-height: 30px;background-color: #edf2fc;border-bottom: solid 1px #ddd;margin: 0">
          <div id="div1">
              <span style="float: left">
                    <a href="/">首页</a><el-divider direction="vertical"></el-divider>
                    <a href="">我的订单</a><el-divider direction="vertical"></el-divider>
                    <a href="">我的会员</a><el-divider direction="vertical"></el-divider>
                    <a href="">企业采购</a><el-divider direction="vertical"></el-divider>
                    <a href="">帮助中心</a>
              </span>
            <span v-if="isLogin" style="float: left;margin-left: 300px">
              <el-menu style="z-index: 10" @select="handleSelect">
              <el-submenu index="1">
                <template slot="title">个人中心</template>
                <el-menu-item-group style="text-align: center">
                  <el-menu-item><el-avatar :src="avatar"> </el-avatar></el-menu-item>
                  <el-menu-item index="1-2">基本信息</el-menu-item>
                  <el-menu-item index="1-3">修改个人信息</el-menu-item>
                  <el-menu-item index="1-4">退出登录</el-menu-item>
                </el-menu-item-group>
              </el-submenu></el-menu>

              </span>
            <span v-else="isLogin" style="float: left;margin-left: 300px">
                    <a style="color: #0aa1ed" href="/login">登录</a><el-divider direction="vertical"></el-divider>
                    <a style="color: #0aa1ed" href="/reg">注册</a>
              </span>
          </div>
        </div>
        <div style="width: 1200px;margin: 0 auto;white-space:nowrap;">
          <div style="display: inline-block;width: 250px"><img src="/logo.png" width="50%"
                                                               style="margin:20px 0 0 60px;"/></div>
          <div style="position: static;display: inline-block;width: 700px;position: relative;bottom: 30px">
            <!--keydown.native.enter 按下回车触发点击事件-->
            <el-input @keydown.native.enter="search()"
                      placeholder="请输入关键字搜索" v-model="searchContent"
                      style="width: 450px;margin-left: 80px"></el-input>
            <el-button @click="search()" style="color: #FFF;background-color: #876c5f;border-color: #876c5f;"
                       icon="el-icon-search">搜索
            </el-button>
          </div>
          <div style="display: inline-block;width: 250px;position: relative;bottom: 30px">
            <el-button plain size="mini" style="width:132px;margin-left: 50px"><a href="/cart"
                                                                                  style="font-size: 15px;color: red">
              <span style="position: relative;bottom: 2px">我的购物车</span> <i class="el-icon-shopping-cart-2"
                                                                           style="font-size: 20px;color: red;position: relative;top: 1px;left: 2px"></i></a>
            </el-button>
          </div>

        </div>
      </el-header>
      <el-main style="margin-top: 90px;padding: 0;background-color: #edf2fc">
        <router-view/>
      </el-main>
      <el-footer style="padding: 0">
        <div style="background-color: #3f3f3f;height: 130px;
                    font-size: 14px;color: #b1b1b1;
                    text-align: center;padding-top: 30px">
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      searchContent: "",
      isLogin: false,
      avatar:''
    }
  },
  created() {
    let user = JSON.parse(sessionStorage.getItem('user'))
    if (user != null) {
      this.isLogin = true
      this.avatar=user.avatar
    }
  },
  methods: {
    search() {
      //跳转到结果页面并且把搜索的关键字传递过去
      location.href = "/search?wd=" + this.searchContent
    },
    handleSelect(index) {
      if (index == '1-4') {
        let url = 'http://localhost:8080/users/logout'
        axios.get(url).then((reponse) => {
          let json = reponse.data
          let state = json.state
          if (state == 20000) {
            this.isLogin = false
            sessionStorage.removeItem("user")
          }
        })
      }else if (index=="1-3"){
        location.href="/userChange"
      }else {
        location.href="/userinfo"
      }
    }
  }
}
</script>

<style>
body {
  font: 16px "Microsoft YaHei UI";
  margin: 0;
  padding: 0;
  color: #666;
  overflow-x: hidden;
}
div.el-submenu__title {
  height: 30px;
  line-height: 30px;
  background-color: #edf2fc;
}
header a {
  text-decoration: none;
  color: #6c6c6c;
}

header a:hover {
  color: #0aa1ed;
}


#div1 {

  width: 100%;
  margin-left: 500px;;
}
</style>




